<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>哈尔滨师范大学</title>
  <style>
    .hidden {
      display: none;
    }

    body{
      background: #f3f3f3;
    }
    .jian_bg{
      background: rgb(255, 255, 255);
      border-radius: 10px;
      padding: 1px 30px;
      box-shadow: 0px 0px 10px 0px #ededed;
      margin-bottom: 25px;
    }
    .left{
      display: flex;
    }
    .ra_blue{
      background: #2070EE;
      width: 5px;
      /* height: 20px; */
      border-radius: 10px;
    }
    .ti_h{
      margin-top: 22px;
      margin-right: 15px;
      height: 20px;
    }
    .ra_h{
      height: 5px;
      margin:  15px 15px 15px 0px;
    }
    .li_title{
      /* background: #bfb6b6; */
      height: 30px;
      line-height: 30px;
      display: inline-block;
      margin-bottom: 10px;
    }
    .no_style{
      border: none;
      outline: none;
    }
    .phone_sty{
      outline: none;
      color: #2070EE;
      border: 1px solid #2070EE;
      border-radius: 4px;
      height: 25px;
      margin-right: -30px;
    }

    .btn{
      width: 50%;
      height: 25px;
      background: #4b8bf3;
      color: white;
      outline: none;
      border: none;
      border-radius: 15px;
      font-weight: 900;
      font-size: 15px;
      box-shadow: 0px 0px 3px 1px #4b8bf3;
      margin: 20px 25%;
    }

    .btn_2{
      width: 35%;
      height: 25px;
      background: #4b8bf3;
      color: white;
      outline: none;
      border: none;
      border-radius: 15px;
      font-weight: 900;
      font-size: 15px;
      box-shadow: 0px 0px 3px 1px #4b8bf3;
      margin-bottom: 20px;
      margin-top: 20px;

    }

    .name_style{
      outline: none;
      border: none;
      border-radius: 4px;
      height: 25px;
      margin-right: -30px;
    }
    .yanzhengm{
      background: #548fef;
      color: aliceblue;
      border-radius: 6px;
      width: 60px;
      padding: 2px;
      text-align: center;

    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 分页设置
    function showHideDivs() {
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");

      if (div1.style.display === "none") {
        div1.style.display = "block";
        div2.style.display = "none";
      } else {
        div1.style.display = "none";
        div2.style.display = "block";
      }
    }
    // 自动点击按钮
    $(document).ready(function() {
      $('#myButton').click();
    });



  </script>
</head>
<body>
<div class="jian_bg left">
  <div class="ra_blue ti_h"></div>
  <h4>哈尔滨师范大学评卷信息填报</h4>
</div>

<div >
  <form th:action="@{/addExternalteacherInfo}" method="post">
    <div id="div2" >
      <div class="jian_bg">
        <div class="left">
          <div class="ra_blue ra_h"></div>
          <div class="li_title ">个人信息</div>
        </div>
        <label for="name">姓名</label>
        <input class="no_style" type="text" id="name" name="name" placeholder="请输入姓名"><br><br>
        <label for="idcard">身份证号</label>
        <input class="no_style" type="text" id="idcard" name="idcard" placeholder="请输入身份证号"><br><br>

        <!-- <div class="left">
            <p style="width: 60%;margin-right: 10px;">是否第一次参加阅卷</p>

            <p>
            <input type="radio" id="male" name="same" value="male">
            <label for="male">是</label>
            </p>
            <p>
            <input type="radio" id="female" name="same" value="female">
            <label for="female">否</label>
            </p>



        </div> -->


        <div class="left">
          <label for="region" style="line-height: 25px;margin-right: 7px;">手机号码</label><br>
          <input class="no_style" style="width: 95px;height: 25px;margin-right: 5px;" type="tel" id="telephone" name="telephone" placeholder="请输入手机号码" ><br><br>

          <select class="phone_sty" id="region" name="region">
            <option value="+86-">中国大陆</option>
            <option value="+886-">中国台湾</option>
          </select>
        </div>

        <div class="left">
          <label for="professionaltitle" style="line-height: 25px;margin-right: 7px;">职称</label><br>
          <input class="no_style" style="width: 110px;;height: 25px;margin-right: 5px;" type="text" name="professionaltitle" id="inputBox"  placeholder="请选择职称" readonly><br><br>

          <select class="name_style" id="professionaltitle" >
            <option value="一级教师">一级教师</option>
            <option value="一级教师 2">一级教师 2</option>
            <option value="一级教师 3">一级教师 3</option>
          </select>
        </div>
        <label for="duties">职务</label>
        <input   class="no_style" style="width: 300px;" type="text" id="duties" name="duties" placeholder="请输入职务（如教师、教务主任等）"  ><br><br>
      </div>
      <div class="jian_bg">
        <div class="left">
          <div class="ra_blue ra_h"></div>
          <div class="li_title ">工作单位</div>
        </div>

        <label for="unitname">单位名称</label>
        <input class="no_style" type="text" id="unitname" name="unitname" placeholder="请输入单位名称"><br><br>
        <label for="unitphone">单位电话</label>
        <input class="no_style" type="text" id="unitphone" name="unitphone" placeholder="电话/固定电话（选填）"><br><br>
      </div>
      <div class="jian_bg">
        <input class="btn" id="myButton" type="button" onclick="showHideDivs()" value="下一页">
      </div>
    </div>

    <div id="div1" class="hidden">
      <div class="jian_bg">
        <div class="left">
          <div class="ra_blue ra_h"></div>
          <div class="li_title ">劳务信息</div>
        </div>
        <p style="color: red;">
          银行账户必须为本人账户！<br>
          建议填报中国银行或中国建设银行借记卡账户信息。
          填报除借记卡以外其他类型账户（如：信用卡）会造成您的劳务费用无法成功发放。
        </p>
        姓名
        <br><br>
        身份证
        <br><br>
        电话号码
        <br><br>
        <label for="bankcardnumber">银行卡号</label>
        <input class="no_style" type="text" id="bankcardnumber" name="bankcardnumber" placeholder="请输入银行卡号"><br><br>
        <label for="openbankadd">开户行所在地</label>
        <input class="no_style" type="text" id="openbankadd" name="openbankadd" placeholder="请输入开户行所在地"><br><br>
        <label for="openbank">开户行</label>
        <input class="no_style" type="text" id="openbank" name="openbank" placeholder="请输入开户行名称"><br><br>
      </div>
      <div class="jian_bg">
        <div class="left">
          <div class="ra_blue ra_h"></div>
          <div class="li_title ">劳务信息</div>
        </div>
        <p>车辆是否入校</p>
        <p>
          <input type="radio" id="caryes" name="vehiclesinter" value=1>
          <label for="no">是</label>
        </p>
        <p>
          <input type="radio" id="carno" name="vehiclesinter" value=0>
          <label for="no">否</label>
        </p>

        <p>是否住宿</p>
        <p>
          <input type="radio" id="yes" name="accommodation" value=1>
          <label for="no">是</label>
        </p>
        <p>
          <input type="radio" id="no" name="accommodation" value=0>
          <label for="no">否</label>
        </p>
        <div class="left" style="margin-bottom: 15px;">
          <label  for="inputCode">验证码</label>
          <input class="no_style" type="text" id="inputCode" placeholder="请输入验证码">
          <div class="yanzhengm"  id="login" onclick="show()"><a href="#"></a></div><br>
        </div>

      </div>
      <div class="jian_bg">
        <button  class="btn_2" onclick="showHideDivs()">上一页</button>
        <input style="float: right;" class="btn_2"  onclick="checkCode()" type="submit" value="提交">
      </div>
    </div>


  </form>



</div>


<script>

  var dropdown = document.getElementById("professionaltitle");
  var inputBox = document.getElementById("inputBox");

  // Add event listener to the dropdown to update the input value when a option is selected
  dropdown.addEventListener("change", function() {
    inputBox.value = this.value;
  });
  // 验证码
  function codes(n){
    var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
    var b="";
    for (var i = 0;i<n;i++){
      var index=Math.floor(Math.random()*62);
      b+=a.charAt(index);
    }
    return b;
  };
  function show(){
    document.getElementById("login").innerHTML=codes(4);
  }
  window.onload=show;
  function checkCode(){
    var userInput = document.getElementById("inputCode").value;
    var generatedCode = document.getElementById("login").innerHTML;
    if(userInput === generatedCode){
      alert("验证码正确");
    }else{
      alert("验证码错误");
    }
  }
</script>
</body>
</html>